<template>
	<view class="gui-padding">
		<view class="gui-margin-top"><gui-stags1 :tags="tags" :padding="30" :size="32" :lineHeight="2.2" @change="change" :type="lei"></gui-stags1></view>
		<view class="gui-margin-top btn gui-flex gui-rows">
			<button type="primary" @tap="open()">添加标签</button>
			<button type="default" @tap="del()">删除标签</button>
		</view>
	</view>
</template>
<script>
import {isOpen,openSqlite,closedb,executeSql,selectSql,isTable} from '@/database.js'
export default {
	data() {
		return {
			// 多选数据
			tags: [],
			lei: 'checked'
		};
	},
	async onShow() {
		await openSqlite();
		this.getdata()
	},
	methods: {
		async getdata(){
			let food=await selectSql('SELECT * FROM food ORDER BY num desc;')
			let arr=[]
			for (let i in food) {
				arr.push({
					id:food[i].id,
					text:food[i].name
				})
			}
			this.tags=arr
		},
		open() {
			let that=this
			plus.nativeUI.prompt("请输入菜品后提交！: ", function(e){
				if(e.index==0){
					executeSql('insert into food (name,num) values ("'+e.value+'",0)');
					uni.showToast({
						icon:'none',
						title:'提交成功！'
					})
					that.getdata()
				}
			}, "自定义菜单", "请输入菜品", ["确定","取消"]);
		},
		del() {
			if (this.lei == 'checked') {
				this.lei = 'remove';
			} else {
				this.lei = 'checked';
			}
		},
		async change(e){
			await executeSql('DELETE FROM food WHERE id='+this.tags[e].id+';');
			this.tags.splice(e, 1);
		}
	}
};
</script>
<style>
.ys {
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	font-size: 28rpx;
	margin: 0 30rpx;
}
.demo-close {
	width: 100rpx;
	height: 100rpx;
	line-height: 100rpx;
	opacity: 0.88;
	text-align: center;
	font-size: 58rpx;
}
.gui-img-in {
	height: 200rpx;
}
.btn button {
	margin-top: 20rpx;
	width: 45%;
	margin: 0 20rpx;
}
</style>
